<!DOCTYPE html>
<!--[if lt IE 7]>
<html lang="en" ng-app="myApp" class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>
<html lang="en" ng-app="myApp" class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>
<html lang="en" ng-app="myApp" class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!-->
<html lang="en" ng-app="myApp" class="no-js"> <!--<![endif]-->
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Chatsky</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link rel="stylesheet" href="stylesheets/bootstrap.min.css">
    <link rel="stylesheet" href="stylesheets/chat.css">

</head>
<body ng-controller="AppCtrl">

<div id="wrap">
    <div id="main" class="clearfix">
        <% include public/nav %>
        <!--[if lt IE 9]>
        <h2 class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a
                href="http://browsehappy.com/">upgrade
            your browser</a> to improve your experience.</h2>
        <![endif]-->

        <div id="container">
            <div id="chat" class="chatPanel normalPanel">
                <div class="content" style="margin-top: -30px">
                    <div id="chat_leftpanel" class="list">
                        <div class="top">
                            <div id="profile" class="title">
                                <div class="myProfile">
                                    <div class="info"><span class="nickName"></span></div>
                                </div>
                            </div>
                        </div>
                        <!--search-->
                        <div class="chatListSearch">
                            <div class="chatListSearchPanel">
                                <div class="chatListSearchInput left">
                                    <span class="chatListSearchIcon left"></span>
                                    <input ng-model="query" class="left" type="text"
                                           name="search" value=""
                                           keydown="preSearch"
                                           keyup="search@.chatListSearchInput"
                                           placeholder="搜索"
                                           id="conv_search" ng-model="search">
                                </div>
                            </div>
                        </div>
                        <!--search end-->
                        <div class="listContentWrap" style="position: relative; overflow-y: scroll; height: 451px;">
                            <div>
                                <div class="listContent" id="chat_conversationListContent">
                                    <div id="conversationContainer" ng-repeat='user in users | filter:query'>
                                        <div class="chatListColumn"
                                             username="{{user}}"
                                             id="{{user}}">
                                            <div class="extend">
                                            </div>
                                            <div class="info">
                                                <div class="nickName">
                                                    <a ng-click="mention(user)">
                                                        <div class="left name">{{user}}</div>
                                                    </a>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="scrollbarBox"
                                     style="position: absolute; right: 0px; top: 0px; height: 100%;">
                                    <div class="scrollbar"
                                         style="position: absolute; right: 0px; top: 0px; height: 353px; opacity: 0"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="chat lightBorder" style="visibility: visible;">
                        <div class="chatContainer" style="height: 571px;">
                            <div class="chatMainPanel" id="chatMainPanel">
                                <div class="chatTitle">
                                </div>
                                <div class="chatScroll" style="height: 472px; overflow-y: scroll; position: relative;">
                                    <!--search-->
                                    <div class="chatListSearch">
                                        <div class="chatListSearchPanel">
                                            <div class="chatListSearchInput left">
                                                <span class="chatListSearchIcon left"></span>
                                                <input ng-model="queryChat" class="left" type="text"
                                                       name="searchChat" value=""
                                                       keydown="preSearch"
                                                       keyup="search@.chatListSearchInput"
                                                       placeholder="搜索"
                                                       id="conv_search" ng-model="search">
                                            </div>
                                        </div>
                                    </div>
                                    <div id="chat_chatmsglist" class="chatContent">
                                        <div class="chatItem" ng-repeat='message in messages | filter:queryChat'
                                             ng-class="{'me':message.user==name, 'you': message.user!=name, 'active':message.me=='active'}">
                                            <div class="chatItemContent">
                                                <div class="cloud cloudText">
                                                    <div class="cloudPannel">
                                                        <div class="cloudBody">
                                                            <div class="cloudContent">
                                                                {{message.user}}: {{message.text}}
                                                            </div>
                                                        </div>
                                                        <div class="cloudArrow "></div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="scrollbarBox"
                                         style="position: absolute; right: 0px; top: 0px; height: 100%;">
                                        <div class="scrollbar"
                                             style="position: absolute; right: 0px; top: 0px; opacity: 0;"></div>
                                    </div>
                                </div>
                                <div id="chat_editor" class="chatOperator lightBorder" ctrl="1">
                                    <div class="inputArea">
                                        <form ng-submit='sendMessage()'>
                                            <input ng-model='message' type="text" id="textInput"
                                                   class="chatInput lightBorder"/>
                                            <input type='submit' class="chatSend"
                                                   value="发送" onclick="return isNotEmpty()"/></a>
                                        </form>
                                    </div>
                                </div>
                            </div>
                            <!--change main panel end--></div>
                    </div>
                </div>
            </div>
        </div>
        <div id="changeNameModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
             aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span
                                    class="sr-only">Close</span></button>
                        <h3 class="modal-title" id="myModalLabel">修改昵称</h3>
                    </div>
                    <div class="modal-body">
                        <p>您现在的昵称是： {{name}}</p>
                        <br/>

                        <form class="form-inline" ng-submit="changeName()" action="">
                            <input ng-model="newName" type="text" class="form-control"/>
                            <input value="修改" class="btn btn-success" style="margin-left: 10px;"
                                   type="submit"/>
                            <button data-dismiss="modal" class="btn btn-danger" style="margin-left: 10px" href="">取消
                            </button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
        <div id="infoModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="infoModal"
             aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span
                                    class="sr-only">Close</span></button>
                        <h3 class="modal-title" id="myModalLabel">关于 Chatsky</h3>
                    </div>
                    <div class="modal-body">
                        <h3>Chatsky, 一个开源在线聊天平台</h3>

                        <p>Copyright © 2014 FindiX Studio All Right Reserved.</p>

                        <p>
                            Developed by <a href="http://www.find1x.com/">FindiX寻未工作室</a>, Licensed under the <a
                                    href="https://github.com/findix/WTFPL">WTFPL</a>, Version
                            2.
                        </p>

                        <p>
                            Powered By <a href="http://www.bootcss.com/" target="_blank"
                                          title="Bootstrap中文网">Bootstrap</a> | <a
                                    href="http://nodejs.org/"
                                    target="_blank" title="Node.js"> Node.js </a> | <a
                                    href="https://www.mongodb.org/‎" target="_blank" title="MongoDB">MongoDB</a>
                            | <a href="http://expressjs.com/" target="_blank" title="Express">Express</a> |
                            <a href="https://angularjs.org/" target="_blank" title="AngularJs">AngularJs</a>
                            <a target="_blank" title="socket.io" href="http://socket.io/">Socket.IO</a>
                        </p>

                        <p>This Project is Open Source On <a target="_blank" href="https://github.com/findix/Chatsky">Github</a>
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- js脚本 -->
<script src="javascripts/lib/jquery-1.11.1.min.js"></script>
<script src="javascripts/lib/bootstrap.min.js"></script>
<script src="javascripts/lib/coffee-script.js"></script>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
<script src="bower_components/angular-socket-io/socket.js"></script>
<script src='javascripts/app.js'></script>
<script src='javascripts/services.js'></script>
<script src='javascripts/controllers.js'></script>
<script src='javascripts/filters.js'></script>
<script src='javascripts/directives.js'></script>

<script src="/socket.io/socket.io.js"></script>

<script>
    var socket = io();
</script>
<script>
    var isNotEmpty = function () {
        return $('.chatInput.lightBorder').val() != ""
    }
</script>
</body>

</html>
